import { ListPropsType } from "@/types";
import { Input, View } from "@tarojs/components";
import { Arrow } from "@taroify/icons";

export default ({ options }: { options: Array<ListPropsType> }) => {
  return (
    <View className="w-full px-8 box-border flex flex-col gap-4">
      {options.map((opt, i) => {
        return (
          <View
            key={i}
            className="flex justify-around  text-[#A7A7A7] text-xs "
          >
            <View className="w-14 flex-shrink-0">{opt.label}</View>
            <View className="flex-grow">
              {opt.flag ? (
                <View>
                  {typeof opt.value == "string" && (
                    <Input
                      onInput={(e) => {
                        if (opt.setValue) opt.setValue(e.detail.value);
                      }}
                      value={opt.value}
                    />
                  )}
                </View>
              ) : (
                <View className="text-black">{opt.value}</View>
              )}
            </View>

            <View className="w-4 flex-shrink-0" onClick={opt.rightHandler}>
              {opt.right ? opt.right : opt.arrow ? <Arrow /> : ""}
            </View>
          </View>
        );
      })}
    </View>
  );
};
